<template>
  <div style="border: 1px solid #ccc; width: 1000px;">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="min-height: 1px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
    />
  </div>
  <br>
  <n-button
      style="width: 64px;"
  >
    重置
  </n-button>
  &nbsp;
  <n-button
      style="width: 64px;"
      type="info"
      @click="handleClick"
  >
    保存
  </n-button>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'


export default {
  components: { Editor, Toolbar },
  setup() {
    const message = window.$message;

    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()


    // 内容 HTML
    const valueHtml = ref('<p>为明确甲方（客户）和乙方（中信银行）的权利和义务， 规范双方业务行为，双方本着平等互利的原则，就电子银行 服务相关事宜达成本协议。\n' +
        '\n' +
        '第一条 定义 下列用语在本协议中的含义为： “电子银行服务”指乙方通过面向社会公众开放通讯通 道或开放型公众网络、为特定自助服务设施或客户建立专用 网络等方式，为甲方提供的电子银行服务，包括网上银行、 手机银行、金融门户、电话银行、电子商务、直销银行服务 等。\n' +
        '\n' +
        '各方式的服务内容主要包括电子账户开立、用户管理、 账户管理、转账支付、投资理财、缴费、信用卡管理、贷款 管理、客户服务等。不同方式提供的服务内容有所区别，具 体以各方式实际提供的服务为准。 “电子银行个人客户”指使用电子银行服务的用户统称， 即本协议甲方。 “密码”指客户自行设定并用于验证客户身份的字符信 息。 </p>')

    const take = ref('')
    // // 模拟 ajax 异步获取内容
    // onMounted(() => {
    //   setTimeout(() => {
    //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    //   }, 1500)
    // })

    //工具栏的配置
    const toolbarConfig = {
      excludeKeys: [
        'blockquote', // 引用
        '|',
        'group-more-style', //下拉菜单
        'color', //颜色
        'bgColor', //背景色
        '|',
        'fontSize', //字号
        'fontFamily', //字体
        'lineHeight', //行高
        '|',
        'todo', //待办
        'group-justify', //对齐
        'group-indent', //缩进
        'emotion', // 表情
        'group-video', //视频
        'insertTable', //表格
        'codeBlock', //代码块
        'divider', //分割线
        'undo', //后退
        'redo', //还原
        'fullScreen' //全屏
      ]
    }

    //编辑器的配置
    const editorConfig = {
      placeholder: '',
      scroll: false,
    }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      handleClick() {
        take.value = valueHtml.value
      }
    };
  }
}
</script>

<style>

</style>